<template>
	<el-container>
		<search :columns="columns" @search="handleSearch" >
			<sc-Table
				:border="true"
				:stripe="true"
				:hidePagination="false"
				:hideDo="false"
				size="small"
				stripe remoteSort remoteFilter
				row-key="id"
				:data="tableData"
				:column="tableColumns">
			</sc-Table>
		</search>
	</el-container>
</template>

<script setup>
import { ref, computed } from 'vue'
import data from './json/data.json'
import columns from './json/columns.json'
import search from './search.vue'
const rules = {}
const formData = ref({})

// 表格数据
const tableData = ref(data)
// 表格列配置
const tableColumns = ref(columns)

const searchParams = ref({})
const filteredData = computed(() => {
	if (Object.keys(searchParams.value).length === 0) {
		return tableData.value
	}

	return tableData.value.filter(item => {
		return Object.keys(searchParams.value).every(key => {
			return String(item[key]).includes(searchParams.value[key])
		})
	})
})
const handleSearch = (params) => {
	searchParams.value = params
}
</script>

<style scoped>
.el-tabs,
.el-card,
.el-table,
.block-element {
	margin-bottom: 10px;
}

.el-button {
	width: fit-content;
}
</style>
